import { createRouter, createWebHashHistory } from 'vue-router';
import Layout from '@/components/Layout.vue';

const routes = [
  {
    path: '/login',
    name: 'login',
    meta: { title: '登录' },
    component: () => import('@/views/login/index.vue'),
  },
  {
    path: '/',
    redirect: '/home',
    component: Layout,
    children: [
      {
        path: '/home',
        name: 'home',
        meta: { title: '首页', icon: 'HomeOutlined' },
        component: () => import('@/views/home.vue'),
      },
      {
        path: '/calendar',
        name: 'calendar',
        redirect: 'index',
        meta: { title: '日历', icon: 'CalendarOutlined' },
        children: [
          {
            path: 'index',
            name: 'index',
            component: () => import('@/views/calendar/index.vue'),
            meta: { title: '单选日历' },
          },
          {
            path: 'week',
            name: 'week',
            component: () => import('@/views/calendar/week.vue'),
            meta: { title: '多选周历' },
          },
          {
            path: 'month',
            name: 'month',
            component: () => import('@/views/calendar/month.vue'),
            meta: { title: '多选月历' },
          },
          {
            path: 'year',
            name: 'year',
            component: () => import('@/views/calendar/year.vue'),
            meta: { title: '多选年历' },
          },
        ],
      },
      {
        path: '/progress',
        name: 'progress',
        redirect: 'base',
        meta: { title: '进度条', icon: 'FundOutlined' },
        children: [
          {
            path: 'base',
            name: 'base',
            meta: { title: '基础进度条' },
            component: () => import('@/views/progress/base.vue'),
          },
          {
            path: 'circle',
            name: 'circle',
            meta: { title: '圆环进度条' },
            component: () => import('@/views/progress/circle.vue'),
          },
          {
            path: 'grid',
            name: 'grid',
            meta: { title: '栅格进度条' },
            component: () => import('@/views/progress/grid.vue'),
          },
          {
            path: 'ring',
            name: 'ring',
            meta: { title: '高级进度条' },
            component: () => import('@/views/progress/ring.vue'),
          },
        ],
      },
      {
        path: '/animation',
        name: 'animation',
        redirect: 'number',
        meta: { title: '动画', icon: 'FundProjectionScreenOutlined' },
        children: [
          {
            path: 'number',
            name: 'number',
            component: () => import('@/views/animation/number.vue'),
            meta: { title: '数值动画' },
          },
        ],
      },
      {
        path: '/plugs',
        name: 'plugs',
        redirect: 'transform',
        meta: { title: '通用功能', icon: 'SettingOutlined' },
        children: [
          {
            path: 'transform',
            name: 'transform',
            component: () => import('@/views/plugs/index.vue'),
            meta: { title: '转换' },
          },
          {
            path: 'modal',
            name: 'modal',
            component: () => import('@/views/plugs/modal.vue'),
            meta: { title: '弹窗' },
          },
          {
            path: 'popper',
            name: 'popper',
            component: () => import('@/views/plugs/popper.vue'),
            meta: { title: '弹出层' },
          },
        ],
      },
    ],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  const user = JSON.parse(localStorage.getItem('user'));
  if (!user?.username) {
    if (to.name === 'login') {
      next();
    } else {
      router.push({
        name: 'login',
      });
    }
  } else {
    next();
  }
});
export default router;
